<template>
  <div class="detail-main">
    <m-slider></m-slider>
    <m-title></m-title>
    <m-comment></m-comment>
    <m-nav></m-nav>
    <m-highlight></m-highlight>
    <m-arrange></m-arrange>
    <m-cost></m-cost>
    <m-notice></m-notice>
    <m-consultation></m-consultation>
    <m-payment></m-payment>
  </div>
</template>

<script>
  import MSlider from './detailcomponents/MSlider';
  import MTitle from './detailcomponents/MTitle';
  import MComment from './detailcomponents/MComment';
  import MNav from './detailcomponents/MNav';
  import MHighlight from './detailcomponents/MHighlight';
  import MArrange from './detailcomponents/MArrange';
  import MCost from './detailcomponents/MCost';
  import MNotice from './detailcomponents/MNotice';
  import MConsultation from './detailcomponents/MConsultation';
  import MPayment from './detailcomponents/MPayment';
  export default {
//    components: {MSlider,MTitle,MComment,MNav,MHighlight,MArrange,MCost,MNotice,MConsultation,MPayment},
    name: 'detail-main',
    components:{
        MSlider,MTitle,MComment,MNav,MHighlight,MArrange,MCost,MNotice,MConsultation,MPayment
    },
    data () {
      return {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .detail-main {
    width: 100%;
    background-color: #F0F0F0;
  }
</style>
